<template>
  <Layout.Content
    v-loading="contractConsoleCtx.contractClass?.state?.loading || false"
    class="contract-file-content contract-file-content-wrap overflow-auto p-6"
  >
    <div class="w-full 2xl:w-xl mx-auto mt-6">
      <Card class="!pr-1/2">
        <BasicTitle class="!pl-4 mb-6" span>模板基本信息</BasicTitle>
        <BasicForm @register="basicRegister" />
      </Card>
    </div>
  </Layout.Content>
</template>

<script lang="ts" setup>
  import { Card, Layout } from 'ant-design-vue';
  import { BasicForm, useForm } from '@/components/Form';
  import { basicSchemas } from '../template.data';
  import { watch } from 'vue';
  import { BasicTitle } from '@/components/Basic';
  import { usePDFViewContext } from '../../pdf-view/hooks/usePDFViewContext';

  const contractConsoleCtx = usePDFViewContext();
  const [basicRegister, basicMethods] = useForm({
    schemas: basicSchemas,
    baseColProps: {
      span: 24,
    },
    showActionButtonGroup: false,
  });

  watch(
    () => [basicMethods.validate],
    (val) => {
      contractConsoleCtx.validateForm = async () => {
        await Promise.all(val.map((el) => el()));

        contractConsoleCtx.contractPdfInfo.value = Object.assign({}, basicMethods.getFieldsValue(), {
          file: basicMethods.getFieldsValue().file.join(),
        });
      };
    },
    {
      immediate: true,
      deep: true,
    },
  );

  watch(
    contractConsoleCtx.contractPdfInfo,
    (data) => {
      if (!data) return;
      basicMethods.setFieldsValue(data);
    },
    {
      immediate: true,
      deep: true,
    },
  );
</script>

<style lang="less" scoped>
  .contract-file-content-wrap {
    padding-top: @header-height;
    height: 100vh;
  }

  // .contract-file-content {}
</style>
